<template>
    <Modal :is-show-modal="isShowCheckModal" modal-title="查看事项">
        <p class='topic'>时间：{{ formatedDateTime }}</p>
        <p class='topic'>内容：{{ data.content }}</p>
        <p class='topic'>状态：{{ data.completed==='1' ? '已完成' : '未完成' }}</p>
        <button class='confirm-btn' @click="$emit('close-modal')">确定</button>
    </Modal>
</template>

<script>
import Modal from "./Modal.vue";
import tools from "utils/tools";

export default {
    name:'CheckModal',
    components: {
        Modal
    },
    props: {
        isShowCheckModal: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            formatedDateTime: null
        }
    },
    watch: {
        data(val) {
            this.formatedDateTime = tools.formatDateTime(Number(val.id));
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';
@import '~styles/variables.scss';
.topic {
    font-size: .14rem;
    margin-bottom: .1rem;
}

.confirm-btn {
    display: block;
    width: 100%;
    padding:  0.1rem;
    margin-top: .4rem;
    font-size: .14rem;
    white-space: nowrap;
    border-radius: 4px;
    color: #fff;
    background-color: $defaultBgColor;
    border-color:$defaultBgColor;
}
</style>
